<template>
  <view class="operate-list" v-if="staticOperates.length > 0">
    <view class="operates-static">
      <a
        class="operate-button"
        @click.stop="operateBtnClickFn(btn)"
        v-for="(btn, btnIndex) in staticOperates"
        :key="btn.label"
        :class="[btnIndex == staticOperates.length - 1 ? 'operate-button-primary' : '']"
      >
        {{ btn.label }}
      </a>
    </view>
    <!-- 显示更多 -->
    <view class="operates-more" v-if="moreButtonGroup.length > 0">
      <a class="operate-more-btn" @tap.stop="moreBtnTap"> 更多 <ve-icon class="operate-more-btn-icon" name="arrow_bottom" size="28" /> </a>
      <!-- 更多悬浮框 -->
      <view class="btns-warp-more" :class="moreBtnsOpenMode" v-show="moreBtnsShow">
        <view class="btns-column-wrapper">
          <view class="btns-column" v-for="(column, columnIndex) in moreButtonGroup" :key="columnIndex">
            <view v-for="(btn, index) in column" class="more-btn" :key="index" @tap.stop="operateBtnClickFn(btn)">
              {{ btn.label }}
            </view>
            <view class="btns-column-split-line" v-if="columnIndex != moreButtonGroup.length - 1"></view>
          </view>
        </view>
        <view class="little-triangle top"></view>
        <view class="little-triangle bottom"></view>
      </view>
      <view
        class="operates-more-block"
        v-show="moreBtnsShow"
        hover-stop-propagation
        @touchmove.stop.prevent="stopRoll"
        @tap.stop="moreBtnTap"
      ></view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { userStore } from '@/stores'
  import { appConfig } from '@/config/index.js'
  import { onLoad, onUnload } from '@dcloudio/uni-app'

  const userInfoStore = userStore()

  // 定义 props
  const props = defineProps({
    operates: {
      type: Array,
      default: () => [],
    },
    record: {
      type: Object,
      default: () => {},
    },
    // 外显的按钮是否反向排列
    staticBtnIsReverse: {
      type: Boolean,
      default: true,
    },
    // 按钮数量
    staticNum: {
      type: Number,
      default: 3,
    },
    // 点击操作存储key
    operateStoragekey: String,
    // 优化：缓存record中的keys；【,】分割，没有则缓存所有
    operateKeys: String,
  })
  const stopRoll = () => {
    moreBtnsShow.value = false
  }
  // 计算显示的按钮
  const visibleOpertes = computed(() => {
    const permissions = userInfoStore.permissons
    const operates = props.operates || []
    const record = props.record
    const btnList = operates.filter((btn) => {
      // 鉴权
      if (appConfig.asyncRoutes == true && btn.permission) {
        if (permissions.includes(btn.permission) == false) {
          return false
        }
      }
      // 判断show
      if (!btn.show) return true
      if (typeof btn.show == 'boolean') {
        return btn.show
      }
      return btn.show(record)
    })
    return btnList
  })
  // 静态显示数量
  const staticNum = props.staticNum || 3
  // 静态操作按钮数组
  const staticOperates = computed(() => {
    let operates = visibleOpertes.value || []
    let showOperates = []
    // 如果按钮数量不超过 staticNum
    if (operates.length <= staticNum) {
      showOperates = operates.slice(0, staticNum)
    } else {
      // 如果超过则取 staticNum 个为固定显示，其他放到更多里
      showOperates = operates.slice(0, staticNum)
    }
    if (props.staticBtnIsReverse) {
      return showOperates.reverse()
    } else {
      return showOperates
    }
  })
  // 更多操作按钮数组
  const moreButtonGroup = computed(() => {
    let operates = visibleOpertes.value || []
    if (operates.length > staticNum) {
      let list = operates.slice(staticNum)
      // 将 button 以 4 个为一组 分组
      let groupItemLength = 4
      if (operates.length > 15) {
        groupItemLength = 5
      }
      if (operates.length > 18) {
        groupItemLength = 6
      }
      let group = []
      let groupItem = []
      while (list.length > 0) {
        if (groupItem.length < groupItemLength) {
          groupItem.push(list.shift())
        } else {
          group.push([...groupItem])
          groupItem = []
          groupItem.push(list.shift())
        }
      }
      if (groupItem.length > 0) {
        group.push(groupItem)
      }
      return group
    } else {
      return []
    }
  })
  // 更多悬浮框显示
  const moreBtnsShow = ref(false)
  const { windowHeight } = uni.getSystemInfoSync()
  // 方向 bottom
  const moreBtnsOpenMode = ref('bottom')
  // 点击更多按钮
  const moreBtnTap = (event) => {
    if (!moreBtnsShow.value) {
      let middleHeight = windowHeight / 2
      let clickY = event.y
      // #ifdef APP-PLUS
      clickY = event.detail.y
      // #endif
      if (clickY >= middleHeight) {
        moreBtnsOpenMode.value = 'top'
      } else {
        moreBtnsOpenMode.value = 'bottom'
      }

      uni.$emit('operateMoreWrapShow')
    }
    moreBtnsShow.value = !moreBtnsShow.value
  }
  const operateBtnClickFn = (btn) => {
    moreBtnsShow.value = false
    if (props.operateStoragekey) {
      let temp = { ...props.record, value: undefined }
      if (props.operateKeys) {
        temp = {}
        props.operateKeys.split(',').map((it) => {
          temp[it] = props.record[it]
        })
      }
      uni.setStorageSync(props.operateStoragekey, temp)
    }
    btn.method(props.record)
  }

  onLoad(() => {
    uni.$on('operateMoreWrapShow', () => {
      moreBtnsShow.value = false
    })
  })
  onUnload(() => {
    uni.$off('operateMoreWrapShow')
  })
</script>
<style lang="less" scoped>
  .operate-list {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-top: 2rpx solid rgba(216, 216, 216, 0.3);
    padding: 16rpx 0 24rpx;

    .operates-static {
      display: flex;
      align-items: center;
      .operate-button {
        height: 56rpx;
        line-height: 52rpx;
        padding: 0 16rpx;
        font-size: 24rpx;
        border-radius: 4rpx;
        border: 2rpx solid #3072f6;
        box-sizing: border-box;
        color: #8491a8;
        display: inline-block;
        flex-shrink: 0;
        color: #3072f6;
      }
      .operate-button + .operate-button {
        margin-left: 12rpx;
      }
      .operate-button-primary {
        background: #3072f6;
        color: #fff;
      }
    }
    .operates-more {
      position: relative;
      height: 56rpx;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      .operate-more-btn {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        .operate-more-btn-icon {
          margin-left: 4rpx;
        }
      }
    }
  }
  .btns-warp-more {
    border-radius: 8rpx;
    background: #ffffff;
    position: absolute;
    left: -12rpx;
    z-index: 1002;
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.1);
    .btns-column-wrapper {
      display: flex;
      .btns-column {
        // padding: 0 12rpx;
        position: relative;
        .more-btn {
          font-size: 28rpx;
          color: #191c27;
          padding: 0 12rpx;
          text-align: center;
          border-bottom: 1px solid #f0f2f5;
          line-height: 80rpx;
          cursor: pointer;
          min-width: 180rpx;
          word-break: keep-all;
        }

        .btns-column-split-line {
          display: block;
          position: absolute;
          right: 0;
          top: 0;
          width: 1px;
          height: 100%;
          background: #f0f2f5;
        }
      }
      .btns-column {
        .more-btn:last-of-type {
          border-bottom: none;
        }
      }
      .btns-column + .btns-column {
        .more-btn:last-of-type {
          border-bottom: 2rpx solid #f0f2f5;
        }
        // .more-btn:nth-of-type(4n) {
        //   border-bottom: none;
        // }
      }
    }
    .little-triangle {
      display: none;
      position: absolute;
      left: 20rpx;
      border-left: 12rpx solid transparent;
      border-right: 12rpx solid transparent;
    }
    .little-triangle.top {
      bottom: -20rpx;
      border-top: 20rpx solid #fff;
      border-bottom: 0;
    }
    .little-triangle.bottom {
      top: -20rpx;
      border-top: 0;
      border-bottom: 20rpx solid #fff;
    }
  }
  .btns-warp-more.top {
    bottom: 64rpx;
    top: inherit;
    .top {
      display: block;
    }
  }
  .btns-warp-more.bottom {
    top: 100%;
    bottom: inherit;
    .bottom {
      display: block;
    }
  }
  .operates-more-block {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1001;
    // background-color: rgba(0, 0, 0, 0.1);
  }
</style>
